<template>
  <div class="basic-info">
    <split-title text="基础信息" />
    <a-row type="flex" class="base-info" :gutter="20">
      <a-col :span="10">
        <avatar :src="data.head_img_url" :encryptConfirmed="true" style="width: 100%" />
      </a-col>
      <a-col :span="14" class="user-info">
        <descriptions :columns="columns.slice(0, 5)" :data-source="data" :col-span="24" />
      </a-col>
    </a-row>
    <descriptions :columns="columns.slice(5, -4)" :data-source="data" :col-span="24" />
    <template v-if="data.people_type_str">
      <descriptions :columns="columns.slice(-4)" :data-source="data" :col-span="24" />
    </template>
    <!--  为数据安全考虑,主要为了不显示证件照所以去掉这整块  -->
    <!--    <div class="pictures">-->
    <!--      <div>-->
    <!--        <avatar :src="identity_img_url" :rate="3 / 4" style="width: 160px" />-->
    <!--        <p>证件照</p>-->
    <!--      </div>-->
    <!--      <div>-->
    <!--        <avatar :src="data.face_img" style="width: 96px" />-->
    <!--        <p>人脸照</p>-->
    <!--      </div>-->
    <!--    </div>-->
  </div>
</template>

<script>
import head from '@gis/lib/components/img-viewer/assets/nor_pic_head.png';
import SplitTitle from '@gis/lib/components/splitter/split-title.vue';
import { getEnumText } from '@gis/lib/enums/index.js';
import idCard from '../assets/nor_pic_idcard.png';
export default {
  name: 'basic-info',
  components: { SplitTitle },
  props: {
    data: { type: Object, default: () => ({}) },
  },
  data() {
    return {
      special_type: '',
      columns: [
        { label: '姓名', key: 'name' },
        { label: '曾用名', key: 'name_before' },
        { label: '性别', key: 'sex', format: (v) => getEnumText('gender', v) },
        { label: '年龄', key: 'age' },
        { label: '民族', key: 'nation' },

        { label: '证件类型', key: 'dic_identity_type' },
        { label: '证件号码', key: 'identity_num' },
        { label: 'QQ', key: 'QQ' },
        { label: '微信', key: 'wechartID' },
        { label: '手机号码', key: 'phone' },
        { label: '登记时间', key: 'create_time' },
        { label: '人员类型', key: 'people_type_str' },
        { label: '特殊类型', key: 'aa', format: (v) => this.special_type },
        { label: '户籍地', key: 'hometown' },
        { label: '现居地', key: 'residence' },

        { label: '紧急联系人姓名', key: 'emergency_contact' },
        { label: '紧急联系人电话', key: 'emergency_contact_phone' },
        { label: '负责网格员姓名', key: 'zz_people_name' },
        { label: '负责网格员电话', key: 'zz_people_phone' },
      ],
    };
  },
  computed: {
    identity_img_url() {
      return this.data.identity_img_url || idCard;
    },
    face_img() {
      return this.data.face_img || head;
    },
  },
  watch: {
    data: {
      immediate: true,
      deep: true,
      handler(data) {
        if (data.people_id) this.getSpecialType();
      },
    },
  },
  methods: {
    async getSpecialType() {
      const params = { people_id: this.data.people_id };
      const res = await this.$axios.get('/xw-microservice/xw-actual-data/v3/people/special/signs', {
        params,
      });
      const data = res.data || [];
      this.special_type = data.map((item) => item.value).join(',');
    },
  },
};
</script>

<style scoped lang="less">
.basic-info {
  //padding: 20px;
  margin-right: -20px;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  overflow: hidden;
  .base-info {
    .user-info {
      & > p {
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
        &:not(:first-child) {
          margin-top: 13px;
        }
      }
    }
  }
  .extra-info {
    margin: 37px 0;
    line-height: 30px;
  }
  .pictures {
    display: flex;
    flex-wrap: nowrap;
    margin-top: 37px;
    & > div {
      flex: none;
      text-align: center;
      & > p {
        margin-top: 12px;
      }
      &:first-child {
        margin-right: 35px;
      }
    }
  }
  /deep/ .avatar {
    padding: 5px;
  }
}
</style>
